<template>
    <view class="short-btn customer-service customerService" @click="showMask = !showMask" ref="customerService"
        @touchstart="!showMask && touchstartHandle('customerService', $event)"
        @touchmove="!showMask && touchmoveHandle('customerService', $event)"
        @touchend="!showMask && end('customerService')" :style="{ left: left + 'px', top: top + 'px' }">
        <view class="short-list" :class="{ show: showMask, classFlag: classFlag, topPos: !classFlag }">
			<template v-for="(item, index) in navList">
				<view class="short-item" v-if="index < 4" :key="index" @click="clickItem(item)">
				    <text>{{item.title}}</text>
				</view>
			</template>
        </view>
        <view class="iconfont">{{ showMask ? '收起' : '展开'}}</view>
    </view>
</template>
<script>
let systemInfo = uni.getSystemInfoSync();
let screenWidth = systemInfo.windowWidth;
let screenHeight = systemInfo.windowHeight;
export default {
	name: 'xpj-floatNav',
	props: {
		navList: {
			type: Array,
			default: () => []
		},
		position: {
			type: String,
			default: 'bottomRight'
		}
	},
    data() {
		
        return {
            showMask: false,
            showShare: false,
            options: [],
            showShort: true,
            show: false,
			left: 0,
			top: 0,
            touch: {
                initialPosition: {
                    x: 0,
                    y: 500
                },
                movePostion: {}
            },
            element: {
                initialPosition: {},
                movePostion: {}
            },
            nowLeft: -1,
            classFlag: false,
			positionObject: {
				topLeft: {
					left: 0,
					top: 100
				},
				topRight: {
					left: screenWidth - 44,
					top: 100
				},
				bottomLeft: {
					left: 0,
					top: screenHeight - 200
				},
				bottomRight: {
					left: screenWidth - 44,
					top: screenHeight - 200
				}
			}
        }
    },
	created() {
	    this.init()
	},
    methods: {
		init() {
			// 根据 position prop 初始化 left 和 top
			if (this.position && this.positionObject[this.position]) {
				this.left = this.positionObject[this.position].left;
				this.top = this.positionObject[this.position].top;
			} else {
				// 如果 position prop 不是预期的值，就设置一个默认的位置
				this.left = this.positionObject.bottomRight.left;
				this.top = this.positionObject.bottomRight.top;
			}
			this.classFlag = this.top < 300
		},
        touchstartHandle(refName, e) {
            if (e.touches && e.touches.length > 0) {
                let touchTarget = e.touches[0];
                this.touch.initialPosition = {
                    x: touchTarget.clientX,
                    y: touchTarget.clientY
                }
                let query = uni.createSelectorQuery();
                query.select('.' + refName).boundingClientRect();
                query.exec((res) => {
                    this.element.initialPosition = {
                        x: res[0].left,
                        y: res[0].top
                    }
                });
            }
        },
        touchmoveHandle(refName, e) {
            if (e.touches && e.touches.length > 0) {
                e.preventDefault();
                let touchTarget = e.touches[0];
                let X = this.element.initialPosition.x + (touchTarget.clientX - this.touch.initialPosition.x);
                let Y = this.element.initialPosition.y + (touchTarget.clientY - this.touch.initialPosition.y);
                let maxWidth = screenWidth - this.$refs[refName].offsetWidth;
                let maxHeight = screenHeight - this.$refs[refName].offsetHeight;
                const isMaxW = X >= maxWidth ? maxWidth : X;
                const isMaxH = Y >= maxHeight ? maxHeight : Y
                X = X <= 0 ? 0 : isMaxW;
                Y = Y <= 0 ? 0 : isMaxH;
                this.nowLeft = X;
                this.classFlag = Y < 300
                // 移动元素
                let query = uni.createSelectorQuery();
                query.select('.' + refName).boundingClientRect();
                query.exec((res) => {
                    this.left = X;
                    this.top = Y;
                });
            }
        },
        end(refName) {
            if (this.nowLeft < 0) {
                return;
            }
            // 吸边处理
            let halfScreenWidth = screenWidth / 2;
            let query = uni.createSelectorQuery();
            query.select('.' + refName).boundingClientRect();
            query.exec((res) => {
                if (this.nowLeft > halfScreenWidth) {
                    // 如果悬浮球在屏幕的右半部分，就停靠在右侧
                    this.left = screenWidth - res[0].width;
                } else {
                    // 如果悬浮球在屏幕的左半部分，就停靠在左侧
                    this.left = 0;
                }
                this.top = res[0].top;
            });
        },
        clickItem(item) {
			if (item.disabled) return;
			this.$emit('click', item)
        },
    },
    watch: {
		position(val) {
			if (val) {
				this.init()
			}
		}
    }
}
</script>

<style lang="scss" scoped>
.customer-service {
    position: fixed;
    right: 20rpx;
    width: 88rpx;
    bottom: 180rpx;
    z-index: 99;
}

.short-btn {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    text-align: center;
    background: linear-gradient(321deg, #4575F4 0%, #5B85F2 30%, #79C1FF 100%);
    box-shadow: 0rpx 3rpx 5rpx 0rpx #B4C8FF;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
        font-size: 44rpx;
        border-radius: 50%;
        color: #fff;
		font-size: 24rpx;
    }
}

.short-list {
    width: 88rpx;
    background: #E0EBF7;
    border-radius: 48rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    min-height: 0rpx;
    max-height: 0rpx;
    overflow: hidden;
    transition: max-height ease-out 0.2s;
    position: absolute;

    &.topPos {
        bottom: 88rpx;
    }

    &.classFlag {
        top: 100rpx;
    }

    .short-item {
        text-align: center;
        padding: 24rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
        text {
            font-size: 24rpx;
            color: #999999;
            margin: 0;
            line-height: 20rpx;
        }

        +.short-item {
            border-top: 1rpx solid #C4D3E4;
        }
    }

    &.show {
        max-height: 500rpx;
        transition: max-height ease-out 0.2s;
    }
}

</style>
